<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>延迟渲染</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		div,li{
			height: 10px;
			border: 1px solid #ff0000;
		}
	</style>
</head>
<body>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<div></div>
<script type="text/javascript">
	//推迟渲染，优化性能。
	function doubleHeight(element) {
	  var currentHeight = element.clientHeight;
	  window.requestAnimationFrame(function () {
	    element.style.height = (currentHeight * 2) + 'px';
	  });
	}
	Array.prototype.slice.apply(document.getElementsByTagName('li'))
	.forEach(doubleHeight);

	var rAF = window.requestAnimationFrame;
	var degrees = 0;
	function update() {
	  document.getElementsByTagName('div')[0].style.transform = "rotate(" + degrees + "deg)";
	  console.log('updated to degrees ' + degrees);
	  degrees = degrees + 1;
	  rAF(update);
	}
	rAF(update);
</script>
</body>
</html>